<template>
  <div class="min-h-screen bg-white">
    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-primary-50 via-blue-50 to-indigo-50 py-20 overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-primary-200 to-blue-300 rounded-full opacity-20 animate-float"></div>
        <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-tr from-indigo-200 to-purple-300 rounded-full opacity-20 animate-float-delayed"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-cyan-200 to-blue-300 rounded-full opacity-10 animate-pulse"></div>
      </div>
      
      <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row items-center gap-12">
          <!-- 基本信息 -->
          <div class="lg:w-1/3 text-center lg:text-left animate-fade-in-left">
            
            <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent mb-2 animate-fade-in-up">
              黎家铭
            </h1>
            <p class="text-lg text-gray-600 mb-6 animate-fade-in-up-delayed">
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                🎓 软件技术专业
              </span>
              <span class="mx-2">·</span>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                🎂 21岁
              </span>
            </p>
            
            <div class="space-y-3 text-sm">
              <div class="flex items-center justify-center lg:justify-start space-x-3 p-3 bg-white/50 backdrop-blur-sm rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
                <span class="text-blue-500 text-lg">📱</span>
                <span class="text-gray-600">136-428-51481</span>
              </div>
              <div class="flex items-center justify-center lg:justify-start space-x-3 p-3 bg-white/50 backdrop-blur-sm rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
                <span class="text-red-500 text-lg">📧</span>
                <span class="text-gray-600">2154666957@qq.com</span>
              </div>
              <div class="flex items-center justify-center lg:justify-start space-x-3 p-3 bg-white/50 backdrop-blur-sm rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
                <span class="text-green-500 text-lg">🏠</span>
                <span class="text-gray-600">茂名</span>
              </div>
            </div>
          </div>
          
          <!-- 个人简介 -->
          <div class="lg:w-2/3 animate-fade-in-right">
            <div class="bg-white/70 backdrop-blur-sm rounded-2xl p-8 shadow-xl border border-white/20">
              <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                <span class="w-8 h-8 bg-gradient-to-r from-primary-500 to-blue-600 rounded-lg flex items-center justify-center mr-3">
                  <span class="text-white text-sm">👋</span>
                </span>
                个人简介
              </h2>
              <div class="space-y-4">
                <p class="text-gray-700 leading-relaxed">
                  你好！我是黎家铭，一名来自广东南方职业学院的软件技术专业学生。
                  我热爱编程，专注于全栈开发，拥有丰富的项目实践经验。
                </p>
                <p class="text-gray-700 leading-relaxed">
                  在校期间，我积极参与各类技术竞赛，获得了蓝桥杯大赛和中国大学生计算机设计大赛的奖项。
                  这些经历让我在技术能力和团队协作方面都有了显著提升。
                </p>
                <p class="text-gray-700 leading-relaxed">
                  在这个博客中，我会分享我的学习心得、项目经验和技术思考，
                  希望能够与更多热爱技术的朋友交流学习。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">

      <!-- Skills -->
      <section class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-gray-900 mb-4 flex items-center justify-center">
            <span class="w-10 h-10 bg-gradient-to-r from-primary-500 to-blue-600 rounded-lg flex items-center justify-center mr-3">
              <span class="text-white text-lg">⚡</span>
            </span>
            专业技能
          </h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            掌握多种编程语言和开发框架，具备全栈开发能力
          </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 编程语言 -->
          <div class="group card p-6 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 bg-gradient-to-br from-white to-yellow-50 border border-yellow-100">
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center mr-3 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <span class="text-white text-xl">💻</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900">编程语言</h3>
            </div>
            <div class="space-y-3">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">Java</span>
                <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="w-4/5 h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full"></div>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">Python</span>
                <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="w-4/5 h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full"></div>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">C / C#</span>
                <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="w-4/5 h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full"></div>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">PHP</span>
                <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="w-4/5 h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full"></div>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">JavaScript</span>
                <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="w-3/5 h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full"></div>
                </div>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-gray-700">HTML5/CSS3</span>
                <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div class="w-3/5 h-full bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 框架与库 -->
          <div class="card p-6">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                <span class="text-green-600 text-xl">🚀</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900">框架与库</h3>
            </div>
            <ul class="space-y-2 text-gray-600">
              <li>SpringBoot (具备开发能力)</li>
              <li>MyBatis (具备开发能力)</li>
              <li>Vue.js (具备开发能力)</li>
              <li>Maven (具备开发能力)</li>
              <li>ElementUI</li>
              <li>Apache ECharts</li>
            </ul>
          </div>

          <!-- 数据库 -->
          <div class="card p-6">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <span class="text-blue-600 text-xl">🗄️</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900">数据库</h3>
            </div>
            <ul class="space-y-2 text-gray-600">
              <li>MySQL (熟悉)</li>
              <li>Redis (了解)</li>
              <li>SQL Server (了解)</li>
            </ul>
          </div>

          <!-- 开发工具 -->
          <div class="card p-6">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                <span class="text-purple-600 text-xl">🛠️</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900">开发工具</h3>
            </div>
            <ul class="space-y-2 text-gray-600">
              <li>Git (熟悉)</li>
              <li>IntelliJ IDEA (熟悉)</li>
              <li>VSCode (熟悉)</li>
              <li>Maven (熟悉)</li>
              <li>Postman (熟悉)</li>
              <li>DataGrip (熟悉)</li>
              <li>微信开发者工具 (熟悉)</li>
              <li>PS (熟悉)</li>
            </ul>
          </div>

          <!-- 其他技能 -->
          <div class="card p-6">
            <div class="flex items-center mb-4">
              <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
                <span class="text-red-600 text-xl">🐧</span>
              </div>
              <h3 class="text-lg font-semibold text-gray-900">其他技能</h3>
            </div>
            <ul class="space-y-2 text-gray-600">
              <li>Linux命令 (熟悉)</li>
              <li>Docker基础操作 (熟悉)</li>
              <li>微信小程序开发</li>
              <li>RESTful API设计</li>
              <li>性能优化</li>
            </ul>
          </div>
        </div>
      </section>

      <!-- Project Experience -->
      <section class="mb-16">
        <h2 class="text-3xl font-bold text-gray-900 mb-8">项目经历</h2>
        <div class="space-y-8">
          <!-- 智能学生管理系统 -->
          <div class="card p-6">
            <div class="flex items-start justify-between mb-4">
              <h3 class="text-xl font-semibold text-gray-900">智能学生管理系统</h3>
              <span class="px-3 py-1 bg-blue-100 text-blue-700 text-sm rounded-full">全栈项目</span>
            </div>
            <div class="mb-4">
              <h4 class="text-sm font-medium text-gray-600 mb-2">技术栈</h4>
              <div class="flex flex-wrap gap-2">
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">SpringBoot</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">MyBatis</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">MySQL</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">Vue.js</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">Element</span>
              </div>
            </div>
            <p class="text-gray-700 mb-4">
              一个前后端分离的学生管理平台，为教育机构提供班级/学生/教职工管理、数据分页、文件上传和权限控制功能，提高运营效率。
            </p>
            <div class="space-y-2">
              <h4 class="text-sm font-medium text-gray-600">主要职责</h4>
              <p class="text-gray-700">独立开发登录模块</p>
              <h4 class="text-sm font-medium text-gray-600">项目成果</h4>
              <p class="text-gray-700">实现了基于JWT的认证系统，通过BCrypt密码加密和Token黑名单机制优化安全性</p>
            </div>
          </div>

          <!-- 快乐外卖 -->
          <div class="card p-6">
            <div class="flex items-start justify-between mb-4">
              <h3 class="text-xl font-semibold text-gray-900">快乐外卖</h3>
              <span class="px-3 py-1 bg-green-100 text-green-700 text-sm rounded-full">移动端项目</span>
            </div>
            <div class="mb-4">
              <h4 class="text-sm font-medium text-gray-600 mb-2">技术栈</h4>
              <div class="flex flex-wrap gap-2">
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">Vue.js</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">ElementUI</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">微信小程序</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">Apache ECharts</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">SpringBoot</span>
                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">Redis</span>
              </div>
            </div>
            <p class="text-gray-700 mb-4">
              针对外卖行业市场需求和商户痛点，构建"快乐外卖"项目进行技能实践。
            </p>
            <div class="space-y-2">
              <h4 class="text-sm font-medium text-gray-600">主要职责</h4>
              <p class="text-gray-700">负责开发商品列表检索功能：基于SpringBoot + MyBatis设计RESTful API，实现分页/分类筛选，引入Redis缓存优化查询，响应时间减少60%，支持高并发访问</p>
              <h4 class="text-sm font-medium text-gray-600">项目成果</h4>
              <p class="text-gray-700">优化菜品列表检索链路，通过Redis缓存热数据+SQL索引优化提升性能，单接口响应时间从200ms压缩至80ms，支持日查询量10万+，页面加载速度提升60%，同时降低数据库负载30%</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Education & Awards -->
      <section class="mb-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <!-- 教育背景 -->
          <div class="card p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">教育背景</h2>
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                  <span class="text-blue-600 text-xl">🎓</span>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900">广东南方职业学院</h3>
                  <p class="text-gray-600 mb-1">软件技术专业 · 大专</p>
                  <p class="text-sm text-gray-500">2023 - 2026</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 荣誉奖项 -->
          <div class="card p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">荣誉奖项</h2>
            <div class="space-y-4">
              <div class="flex items-start">
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                  <span class="text-yellow-600 text-xl">🏆</span>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900">第十六届蓝桥杯大赛</h3>
                  <p class="text-gray-600 mb-1">广东赛区三等奖</p>
                  <p class="text-sm text-gray-500">编程竞赛</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                  <span class="text-green-600 text-xl">🥈</span>
                </div>
                <div>
                  <h3 class="text-lg font-semibold text-gray-900">第18届中国大学生计算机设计大赛</h3>
                  <p class="text-gray-600 mb-1">边缘智能应用赛项二等奖</p>
                  <p class="text-sm text-gray-500">计算机设计竞赛</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Call to Action -->
      <section class="text-center">
        <div class="card p-8 bg-gradient-to-br from-primary-50 to-blue-50">
          <h2 class="text-2xl font-bold text-gray-900 mb-4">让我们一起成长</h2>
          <p class="text-gray-600 mb-6 max-w-2xl mx-auto">
            如果你对我的文章感兴趣，或者有任何技术问题想要讨论，
            欢迎阅读我的博客文章。让我们一起在技术的道路上成长！
          </p>
          <div class="flex justify-center">
            <router-link to="/blog" class="btn-primary">
              阅读我的文章
            </router-link>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
// No additional logic needed for this static page
</script>

<style scoped>
/* 动画定义 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes float-delayed {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes bounce-gentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up-delayed {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画类 */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite;
  animation-delay: 2s;
}

.animate-bounce-gentle {
  animation: bounce-gentle 3s ease-in-out infinite;
}

.animate-fade-in-left {
  animation: fade-in-left 0.8s ease-out;
}

.animate-fade-in-right {
  animation: fade-in-right 0.8s ease-out 0.2s both;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out 0.1s both;
}

.animate-fade-in-up-delayed {
  animation: fade-in-up 0.8s ease-out 0.3s both;
}

/* 卡片悬停效果 */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 渐变文字效果 */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* 毛玻璃效果 */
.backdrop-blur-sm {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .animate-fade-in-left,
  .animate-fade-in-right {
    animation: fade-in-up 0.8s ease-out;
  }
}
</style>
